import React, { useState } from 'react';
import OverflowTabs from '../../../components/OverflowTabs';
import { TabItem } from '../../../components/OverflowTabs/interface';
import './index.less';

/**
 * OverflowTabs 组件测试页面
 */
const OverflowTabsDemo: React.FC = () => {
    // 创建示例标签数据
    const [tabs, setTabs] = useState<TabItem[]>([
        { key: 'tab1', label: '标签1' },
        { key: 'tab2', label: '标签2' },
        { key: 'tab3', label: '标签3' },
        { key: 'tab4', label: '标签4' },
        { key: 'tab5', label: '标签5' },
        { key: 'tab6', label: '标签6' },
        { key: 'tab7', label: '标签7' },
        { key: 'tab8', label: '标签8' },
        { key: 'tab9', label: '标签9' },
        { key: 'tab10', label: '标签10' },
    ]);

    // 当前激活的标签
    const [activeKey, setActiveKey] = useState('tab1');

    // 添加新标签
    const handleAddTab = () => {
        const newKey = `tab${tabs.length + 1}`;
        setTabs([...tabs, { key: newKey, label: `标签${tabs.length + 1}` }]);
    };

    // 移除标签
    const handleRemoveTab = (key: string) => {
        setTabs(tabs.filter((tab) => tab.key !== key));
        if (activeKey === key) {
            setActiveKey(tabs[0]?.key || '');
        }
    };

    return (
        <div className="overflow-tabs-demo">
            <h1>OverflowTabs 组件演示</h1>

            <div className="demo-section">
                <h2>基本用法</h2>
                <div className="tabs-container">
                    {/* <OverflowTabs
                        tabs={tabs}
                        activeKey={activeKey}
                        onChange={setActiveKey}
                    /> */}
                </div>
            </div>

            <div className="demo-section">
                <h2>窄容器中的表现</h2>
                <div className="tabs-container narrow">
                    <OverflowTabs
                        tabs={tabs}
                        activeKey={activeKey}
                        onChange={setActiveKey}
                    />
                </div>
            </div>

            <div className="demo-section">
                <h2>操作</h2>
                <div className="actions">
                    <button onClick={handleAddTab}>添加标签</button>
                    <button
                        onClick={() => handleRemoveTab(activeKey)}
                        disabled={tabs.length <= 1}
                    >
                        移除当前标签
                    </button>
                </div>
                <div>当前激活标签: {activeKey}</div>
            </div>

            <div className="demo-section">
                <h2>带禁用状态的标签</h2>
                <div className="tabs-container">
                    {/* <OverflowTabs
                        tabs={[
                            { key: 'tab1', label: '标签1' },
                            { key: 'tab2', label: '标签2', disabled: true },
                            { key: 'tab3', label: '标签3' },
                            { key: 'tab4', label: '标签4', disabled: true },
                            { key: 'tab5', label: '标签5' },
                        ]}
                        activeKey={activeKey}
                        onChange={setActiveKey}
                    /> */}
                </div>
            </div>
        </div>
    );
};

export default OverflowTabsDemo;
